<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
    <script type="text/javascript"
            src="https://api.map.baidu.com/api?v=2.0&ak=k8qty39Yu17dSx7WFqejVIO1snGRGtFf&__ec_v__=20190126"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/my_style.css">

    <!-- 用于引入外部html -->
    <script src="../js/include.js"></script>

    <!-- 图标文件 -->
    <script src="../js/feather.min.js"></script>

    <script src="../js/popper.min.js"></script>
    <style>
        #time {
            position: absolute;
            margin-left: 20%;
            top: 12%;
            width: 195px;
            height: 25px;
            background-color: #d1ecf1;
            border-style: solid;
            border: #1b1e21;
            border: 20px;
            font-size: 15px;
        }
    </style>
    <title>出行方式统计</title>
</head>
<body>
<!-- 共用的navbar -->
<include src="navbar.html"></include>

<div class="container-fluid">
    <div class="row">
        <div id="time">
            <p id="date">16:51:48 | 每2秒自动刷新</p>
        </div>
        <!-- 共用的sidebar -->
        <include src="sidebar.html"></include>
        <!-- 主要内容 -->
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
            <div id="container"
                 style="position:absolute;margin-top: 10%; margin-left: 10%; width: 1000px; height: 500px" ;
                 z-index="80"></div>

            <script type="text/javascript">
                var dom = document.getElementById("container");
                var myChart = echarts.init(dom);
                var app = {};
                var busa = 0;
                var bikea = 0;
                var traina = 0;
                var walka = 0;
                var cara = 0;
                var traffic = 0;
                var timee=0;
                var hour;
                var minute;
                var second;
                var pathSymbols = {
                    bus: 'path://M916.836007 714.231911l-35.392495 0c-0.414456-81.85324-67.08661-148.108223-149.356636-148.108223-82.270026 0-148.96981 66.254983-149.411897 148.108223L436.189859 714.231911c-0.414456-81.85324-67.08661-148.108223-149.356636-148.108223-82.284353 0-148.956507 66.254983-149.384266 148.080593-40.900155-0.082888-74.029004-33.127492-74.029004-73.874521L63.419953 307.699987c0-40.829917 33.226067-73.92978 74.209113-73.92978l473.343536 0c2.954406-0.330528 5.824898-0.800225 9.027977-0.800225l185.521759 0c20.485383 0 40.444765 7.426133 44.751014 16.977673l76.831954 170.689521c15.376829 4.499477 26.834235 18.10945 26.834235 34.894741l0 221.73408C953.940564 697.695283 937.32139 714.231911 916.836007 714.231911zM323.150825 344.638271c0-20.401656-16.60587-36.937261-37.09023-36.937261L174.733623 307.701011c-20.485383 0-37.104556 16.536628-37.104556 36.937261l0 73.92978c0 20.400632 16.619174 36.96489 37.104556 36.96489l111.326973 0c20.484359 0 37.09023-16.564257 37.09023-36.96489L323.150825 344.638271zM582.896023 344.638271c0-20.401656-16.619174-36.937261-37.104556-36.937261L434.477798 307.701011c-20.484359 0-37.104556 16.536628-37.104556 36.937261l0 73.92978c0 20.400632 16.620197 36.96489 37.104556 36.96489l111.312646 0c20.485383 0 37.104556-16.564257 37.104556-36.96489L582.895 344.638271zM820.623887 431.763584l-38.953746-113.130593c-2.125494-6.211469-12.037644-11.042497-22.196421-11.042497l-46.877531 0c-10.187431 0-18.441757 4.831029-18.441757 11.042497L694.154432 431.763584c0 12.975523 12.810272 24.128537 28.656818 24.128537l77.46643 0C816.096594 455.891098 825.068288 444.738084 820.623887 431.763584zM286.916114 603.363847c61.964752 0 112.169188 50.0233 112.169188 111.751177 0 61.700247-50.204436 111.722524-112.169188 111.722524-61.951449 0-112.182492-50.022277-112.182492-111.722524C174.733623 653.387148 224.965689 603.363847 286.916114 603.363847zM285.702424 750.865249c20.498686 0 37.11786-16.564257 37.11786-36.991496 0-20.401656-16.619174-36.96489-37.11786-36.96489-20.51199 0-37.132187 16.564257-37.132187 36.96489C248.569213 734.300992 265.18941 750.865249 285.702424 750.865249zM732.169768 603.363847c61.951449 0 112.169188 50.0233 112.169188 111.751177 0 61.700247-50.217739 111.722524-112.169188 111.722524-61.950426 0-112.168165-50.022277-112.168165-111.722524C620.00058 653.387148 670.219342 603.363847 732.169768 603.363847zM730.955054 750.865249c20.51199 0 37.131163-16.564257 37.131163-36.991496 0-20.401656-16.619174-36.96489-37.131163-36.96489-20.513013 0-37.132187 16.564257-37.132187 36.96489C693.822867 734.300992 710.44204 750.865249 730.955054 750.865249z',
                    train: 'path://M67.335,33.596L67.335,33.596c-0.002-1.39-1.153-3.183-3.328-4.218h-9.096v-2.07h5.371 c-4.939-2.07-11.199-4.141-14.89-4.141H19.72v12.421v5.176h38.373c4.033,0,8.457-1.035,9.142-5.176h-0.027 c0.076-0.367,0.129-0.751,0.129-1.165L67.335,33.596L67.335,33.596z M27.999,30.413h-3.105v-4.141h3.105V30.413z M35.245,30.413 h-3.104v-4.141h3.104V30.413z M42.491,30.413h-3.104v-4.141h3.104V30.413z M49.736,30.413h-3.104v-4.141h3.104V30.413z  M14.544,40.764c1.143,0,2.07-0.927,2.07-2.07V35.59V25.237c0-1.145-0.928-2.07-2.07-2.07H-9.265c-1.143,0-2.068,0.926-2.068,2.07 v10.351v3.105c0,1.144,0.926,2.07,2.068,2.07H14.544L14.544,40.764z M8.333,26.272h3.105v4.141H8.333V26.272z M1.087,26.272h3.105 v4.141H1.087V26.272z M-6.159,26.272h3.105v4.141h-3.105V26.272z M-9.265,41.798h69.352v1.035H-9.265V41.798z',
                    car: 'path://M49.592,40.883c-0.053,0.354-0.139,0.697-0.268,0.963c-0.232,0.475-0.455,0.519-1.334,0.475 c-1.135-0.053-2.764,0-4.484,0.068c0,0.476,0.018,0.697,0.018,0.697c0.111,1.299,0.697,1.342,0.931,1.342h3.7 c0.326,0,0.628,0,0.861-0.154c0.301-0.196,0.43-0.772,0.543-1.78c0.017-0.146,0.025-0.336,0.033-0.56v-0.01 c0-0.068,0.008-0.154,0.008-0.25V41.58l0,0C49.6,41.348,49.6,41.09,49.592,40.883L49.592,40.883z M6.057,40.883 c0.053,0.354,0.137,0.697,0.268,0.963c0.23,0.475,0.455,0.519,1.334,0.475c1.137-0.053,2.762,0,4.484,0.068 c0,0.476-0.018,0.697-0.018,0.697c-0.111,1.299-0.697,1.342-0.93,1.342h-3.7c-0.328,0-0.602,0-0.861-0.154 c-0.309-0.18-0.43-0.772-0.541-1.78c-0.018-0.146-0.027-0.336-0.035-0.56v-0.01c0-0.068-0.008-0.154-0.008-0.25V41.58l0,0 C6.057,41.348,6.057,41.09,6.057,40.883L6.057,40.883z M49.867,32.766c0-2.642-0.344-5.224-0.482-5.507 c-0.104-0.207-0.766-0.749-2.271-1.773c-1.522-1.042-1.487-0.887-1.766-1.566c0.25-0.078,0.492-0.224,0.639-0.241 c0.326-0.034,0.345,0.274,1.023,0.274c0.68,0,2.152-0.18,2.453-0.48c0.301-0.303,0.396-0.405,0.396-0.672 c0-0.268-0.156-0.818-0.447-1.146c-0.293-0.327-1.541-0.49-2.273-0.585c-0.729-0.095-0.834,0-1.022,0.121 c-0.304,0.189-0.32,1.919-0.32,1.919l-0.713,0.018c-0.465-1.146-1.11-3.452-2.117-5.269c-1.103-1.979-2.256-2.599-2.737-2.754 c-0.474-0.146-0.904-0.249-4.131-0.576c-3.298-0.344-5.922-0.388-8.262-0.388c-2.342,0-4.967,0.052-8.264,0.388 c-3.229,0.336-3.66,0.43-4.133,0.576s-1.633,0.775-2.736,2.754c-1.006,1.816-1.652,4.123-2.117,5.269L9.87,23.109 c0,0-0.008-1.729-0.318-1.919c-0.189-0.121-0.293-0.225-1.023-0.121c-0.732,0.104-1.98,0.258-2.273,0.585 c-0.293,0.327-0.447,0.878-0.447,1.146c0,0.267,0.094,0.379,0.396,0.672c0.301,0.301,1.773,0.48,2.453,0.48 c0.68,0,0.697-0.309,1.023-0.274c0.146,0.018,0.396,0.163,0.637,0.241c-0.283,0.68-0.24,0.524-1.764,1.566 c-1.506,1.033-2.178,1.566-2.271,1.773c-0.139,0.283-0.482,2.865-0.482,5.508s0.189,5.02,0.189,5.86c0,0.354,0,0.976,0.076,1.565 c0.053,0.354,0.129,0.697,0.268,0.966c0.232,0.473,0.447,0.516,1.334,0.473c1.137-0.051,2.779,0,4.477,0.07 c1.135,0.043,2.297,0.086,3.33,0.11c2.582,0.051,1.826-0.379,2.928-0.36c1.102,0.016,5.447,0.196,9.424,0.196 c3.976,0,8.332-0.182,9.423-0.196c1.102-0.019,0.346,0.411,2.926,0.36c1.033-0.018,2.195-0.067,3.332-0.11 c1.695-0.062,3.348-0.121,4.477-0.07c0.886,0.043,1.103,0,1.332-0.473c0.132-0.269,0.218-0.611,0.269-0.966 c0.086-0.592,0.078-1.213,0.078-1.565C49.678,37.793,49.867,35.408,49.867,32.766L49.867,32.766z M13.219,19.735 c0.412-0.964,1.652-2.9,2.256-3.244c0.145-0.087,1.426-0.491,4.637-0.706c2.953-0.198,6.217-0.276,7.73-0.276 c1.513,0,4.777,0.078,7.729,0.276c3.201,0.215,4.502,0.611,4.639,0.706c0.775,0.533,1.842,2.28,2.256,3.244 c0.412,0.965,0.965,2.858,0.861,3.116c-0.104,0.258,0.104,0.388-1.291,0.275c-1.387-0.103-10.088-0.216-14.185-0.216 c-4.088,0-12.789,0.113-14.184,0.216c-1.395,0.104-1.188-0.018-1.291-0.275C12.254,22.593,12.805,20.708,13.219,19.735 L13.219,19.735z M16.385,30.511c-0.619,0.155-0.988,0.491-1.764,0.482c-0.775,0-2.867-0.353-3.314-0.371 c-0.447-0.017-0.842,0.302-1.076,0.362c-0.23,0.06-0.688-0.104-1.377-0.318c-0.688-0.216-1.092-0.155-1.316-1.094 c-0.232-0.93,0-2.264,0-2.264c1.488-0.068,2.928,0.069,5.621,0.826c2.693,0.758,4.191,2.213,4.191,2.213 S17.004,30.357,16.385,30.511L16.385,30.511z M36.629,37.293c-1.23,0.164-6.386,0.207-8.794,0.207c-2.412,0-7.566-0.051-8.799-0.207 c-1.256-0.164-2.891-1.67-1.764-2.865c1.523-1.627,1.24-1.576,4.701-2.023C24.967,32.018,27.239,32,27.834,32 c0.584,0,2.865,0.025,5.859,0.404c3.461,0.447,3.178,0.396,4.699,2.022C39.521,35.623,37.887,37.129,36.629,37.293L36.629,37.293z  M48.129,29.582c-0.232,0.93-0.629,0.878-1.318,1.093c-0.688,0.216-1.145,0.371-1.377,0.319c-0.231-0.053-0.627-0.371-1.074-0.361 c-0.448,0.018-2.539,0.37-3.313,0.37c-0.772,0-1.146-0.328-1.764-0.481c-0.621-0.154-0.966-0.154-0.966-0.154 s1.49-1.464,4.191-2.213c2.693-0.758,4.131-0.895,5.621-0.826C48.129,27.309,48.361,28.643,48.129,29.582L48.129,29.582z',
                    bike: 'path://M213.333333 874.666667C130.986667 874.666667 64 807.68 64 725.333333 64 642.986667 130.986667 576 213.333333 576 295.68 576 362.666667 642.986667 362.666667 725.333333 362.666667 807.68 295.68 874.666667 213.333333 874.666667M213.333333 512C95.573333 512 0 607.573333 0 725.333333 0 843.093333 95.573333 938.666667 213.333333 938.666667 331.093333 938.666667 426.666667 843.093333 426.666667 725.333333 426.666667 607.573333 331.093333 512 213.333333 512M631.466667 426.666667 810.666667 426.666667 810.666667 349.866667 674.133333 349.866667 591.36 210.346667C578.986667 189.013333 554.666667 174.933333 529.066667 174.933333 509.013333 174.933333 490.666667 183.04 477.866667 196.266667L320 353.706667C306.773333 366.933333 298.666667 384 298.666667 405.333333 298.666667 432.213333 312.746667 454.826667 334.933333 468.053333L477.866667 554.666667 477.866667 768 554.666667 768 554.666667 490.666667 458.666667 420.266667 557.653333 320M810.666667 874.666667C728.32 874.666667 661.333333 807.68 661.333333 725.333333 661.333333 642.986667 728.32 576 810.666667 576 893.013333 576 960 642.986667 960 725.333333 960 807.68 893.013333 874.666667 810.666667 874.666667M810.666667 512C692.906667 512 597.333333 607.573333 597.333333 725.333333 597.333333 843.093333 692.906667 938.666667 810.666667 938.666667 928.426667 938.666667 1024 843.093333 1024 725.333333 1024 607.573333 928.426667 512 810.666667 512M682.666667 204.8C725.333333 204.8 759.466667 170.666667 759.466667 128 759.466667 85.333333 725.333333 51.2 682.666667 51.2 640 51.2 605.866667 85.333333 605.866667 128 605.866667 170.666667 640 204.8 682.666667 204.8Z',
                    walk: 'path://M29.902,23.275c1.86,0,3.368-1.506,3.368-3.365c0-1.859-1.508-3.365-3.368-3.365 c-1.857,0-3.365,1.506-3.365,3.365C26.537,21.769,28.045,23.275,29.902,23.275z M36.867,30.74c-1.666-0.467-3.799-1.6-4.732-4.199 c-0.932-2.6-3.131-2.998-4.797-2.998s-7.098,3.894-7.098,3.894c-1.133,1.001-2.1,6.502-0.967,6.769 c1.133,0.269,1.266-1.533,1.934-3.599c0.666-2.065,3.797-3.466,3.797-3.466s0.201,2.467-0.398,3.866 c-0.599,1.399-1.133,2.866-1.467,6.198s-1.6,3.665-3.799,6.266c-2.199,2.598-0.6,3.797,0.398,3.664 c1.002-0.133,5.865-5.598,6.398-6.998c0.533-1.397,0.668-3.732,0.668-3.732s0,0,2.199,1.867c2.199,1.865,2.332,4.6,2.998,7.73 s2.332,0.934,2.332-0.467c0-1.401,0.269-5.465-1-7.064c-1.265-1.6-3.73-3.465-3.73-5.265s1.199-3.732,1.199-3.732 c0.332,1.667,3.335,3.065,5.599,3.399C38.668,33.206,38.533,31.207,36.867,30.74z'
                };
                /*busa = (function a() {
                    var buss = 0;
                    $.ajax({
                        type: "POST",
                        url: "/count/bus",
                        dataType: 'json',
                        async: false,
                        success: function (bus) {
                            buss = bus;
                        },
                        error: function () {
                        }
                    })
                    return buss;
                })();

                walka = (function a() {
                    var walkk = 0;
                    $.ajax({
                        type: "POST",
                        url: "/count/walk",
                        dataType: 'json',
                        async: false,
                        success: function (walk) {
                            walkk = walk;
                        },
                        error: function () {
                        }
                    })
                    return walkk;
                })();

                traina = (function a() {
                    var trainn = 0;
                    $.ajax({
                        type: "POST",
                        url: "/count/train",
                        dataType: 'json',
                        async: false,
                        success: function (train) {
                            trainn = train;
                        },
                        error: function () {
                        }
                    })
                    return trainn;
                })();

                bikea = (function a() {
                    var bikee = 0;
                    $.ajax({
                        type: "POST",
                        url: "/count/bike",
                        dataType: 'json',
                        async: false,
                        success: function (bike) {
                            bikee = bike;
                        },
                        error: function () {
                        }
                    })
                    return bikee;
                })();

                cara = (function a() {
                    var carr = 0;
                    $.ajax({
                        type: "POST",
                        url: "/count/car",
                        dataType: 'json',
                        async: false,
                        success: function (car) {
                            carr = car;
                        },
                        error: function () {
                        }
                    })
                    return carr;
                })();*/

                function f(args) {
                    traffic = (function b() {
                        var trafficc = 0;
                        $.ajax({
                            type: "POST",
                            url: "/count/traffic",
                            dataType: 'json',
                            async: false,
                            success: function (traffic) {
                                trafficc = traffic;
                            },
                            error: function () {
                            }
                        })
                        return trafficc;
                    })();
                    console.log(traffic);
                    if (traffic) {
                        console.log("1");
                        timee = (function t() {
                        $.ajax({
                            type: "POST",
                            url: "/count/time",
                            dataType: 'text',
                            async: false,
                            success: function (t) {
                                timee = t;
                                console.log("456");
                                console.log(t);
                                console.log("1412");
                                hour =timee.slice(8,10);
                                minute =timee.slice(10,12);
                                second =timee.slice(12,14);
                                var show = hour + ":" + minute + ":" + second + "| 每2秒自动刷新";
                                $('#date').empty();
                                $('#date').append(show);
                            },
                            error: function () {
                            }
                          });
                          return timee;
                        })();
                        busa = (function a() {
                            var buss = 0;
                            $.ajax({
                                type: "POST",
                                url: "/count/bus",
                                dataType: 'json',
                                async: false,
                                success: function (bus) {
                                    buss = bus;
                                },
                                error: function () {
                                }
                            })
                            return buss;
                        })();
                        console.log("2");
                        walka = (function a() {
                            var walkk = 0;
                            $.ajax({
                                type: "POST",
                                url: "/count/walk",
                                dataType: 'json',
                                async: false,
                                success: function (walk) {
                                    walkk = walk;
                                },
                                error: function () {
                                }
                            })
                            return walkk;
                        })();
                        console.log("3");
                        traina = (function a() {
                            var trainn = 0;
                            $.ajax({
                                type: "POST",
                                url: "/count/train",
                                dataType: 'json',
                                async: false,
                                success: function (train) {
                                    trainn = train;
                                },
                                error: function () {
                                }
                            })
                            return trainn;
                        })();
                        console.log("4");
                        bikea = (function a() {
                            var bikee = 0;
                            $.ajax({
                                type: "POST",
                                url: "/count/bike",
                                dataType: 'json',
                                async: false,
                                success: function (bike) {
                                    bikee = bike;
                                },
                                error: function () {
                                }
                            })
                            return bikee;
                        })();
                        console.log("5");
                        cara = (function a() {
                            var carr = 0;
                            $.ajax({
                                type: "POST",
                                url: "/count/car",
                                dataType: 'json',
                                async: false,
                                success: function (car) {
                                    carr = car;
                                },
                                error: function () {
                                }
                            })
                            return carr;
                        })();
                    }
                    option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'none'
                            },
                            formatter: function (params) {
                                return params[0].name + ': ' + params[0].value;
                            }
                        },
                        xAxis: {
                            data: ['公交', '地铁', '汽车', '骑车', '步行',],
                            axisTick: {show: false},
                            axisLine: {show: false},
                            axisLabel: {
                                color: '#e54035'
                            }
                        },
                        yAxis: {
                            splitLine: {show: false},
                            axisTick: {show: false},
                            axisLine: {show: false},
                            axisLabel: {show: false}
                        },
                        color: ['#e54035'],
                        series: [{
                            name: 'hill',
                            type: 'pictorialBar',
                            barCategoryGap: '-130%',
                            // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
                            symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
                            itemStyle: {
                                opacity: 0.5
                            },
                            emphasis: {
                                itemStyle: {
                                    opacity: 1
                                }
                            },
                            data: [busa, traina, cara, bikea, walka],
                            z: 10
                        }, {
                            name: 'glyph',
                            type: 'pictorialBar',
                            barGap: '-100%',
                            symbolPosition: 'end',
                            symbolSize: 50,
                            symbolOffset: [0, '-120%'],
                            data: [{
                                value: busa,
                                symbol: pathSymbols.bus,
                                symbolSize: [60, 60]
                            }, {
                                value: traina,
                                symbol: pathSymbols.train,
                                symbolSize: [50, 30]
                            }, {
                                value: cara,
                                symbol: pathSymbols.car,
                                symbolSize: [40, 30]
                            }, {
                                value: bikea,
                                symbol: pathSymbols.bike,
                                symbolSize: [40, 50]
                            }, {
                                value: walka,
                                symbol: pathSymbols.walk,
                                symbolSize: [40, 50]
                            }]
                        }]
                    }
                    myChart.setOption(option, true);
                }

                f();
                setInterval(f, 2000);
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            </script>
        </main>
    </div>
</div>
</body>
</html>>